<template>
    <div class="login-container">
        <div class="login-title">桌面系统</div>
        <lay-json-schema-form :model="data" :schema="form"></lay-json-schema-form>
        <lay-button style="width: 250px;margin-left:37.5px;" type="primary" @click="doLogin">登录</lay-button>
    </div>
</template>
<script setup lang="ts">
import {reactive, onMounted} from 'vue'
import router from './../router/index'
import {useStore} from 'vuex'

const $store = useStore()

const data = reactive({
    username: 'admin',
    password: 'admin123',
})

const form = reactive({
    username: {
        label: '账户',
        type: 'input',
        props: {
            type: 'text',
            placeholder: '请输入账户',
        }
    },
    password: {
        label: '密码',
        type: 'input',
        props: {
            autocomplete: 'off',
            type: 'password',
            placeholder: '请输入密码',
        }
    }
})

const doLogin = () => {
    router.push('/index')
}

onMounted(() => {
    console.log('token:' + $store.state.token)
})
</script>
<style>
.login-container {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: url('./../assets/login.svg');
}
.login-title {
    font-size: 24px;
    color: rgb(22, 186, 170);
    font-weight: bold;
    margin-bottom: 30px;
}
</style>